<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01_变量相关问题</title>
  </head>
  <body>
  <script>
    /* 
    1.变量是什么?
    2.区别基本类型变量与引用类型变量?
    3.给变量赋值到底做了什么?
    4.函数传参是值传递还是引用传递?
    5.有哪些改变变量值的方式?
    6.理解下面的2句话
    */

    /* 
    1.变量是什么?
      可以变化的量(数据/值)
      组成: 变量名和变量值
      关系: 变量名是变量值的标识名称
      一个变量就对应一块小内存
      变量名是内存的标识
      变量值是内存中保存的数据
    */
   /*  var a = 3
    console.log(a) */

    /* 
    2.区别基本类型变量与引用类型变量?
    依据: 内存中保存的是基本类型值还是地址值?
    基本变量: 内存中保存的是基本类型值
    引用变量: 内存中保存的是地址值
    */
    /* var a1 = 4
    var a3 = 'abc'
    var a2 = {m: 1} */

    /* 
    3.给变量赋值到底做了什么?
      将基本值赋值给变量:  将基本值保存到变量内存中
      将对象赋值给变量: 将对象的地址值保存到变量内存中
      将另一个变量(右边)赋值给变量(左边): 拷贝右边变量内存中的数据, 保存到左边变量内存中
    */
    /* var a1 = 5
    var a2 = [1]
    var a3 = a1
    a3 = a2  // 不是将a2内存的地址值赋值/拷贝给a3内存 */

    /* 
    4.函数传参是值传递还是引用传递?
      传递的都是实参变量中保存的数据值, 只是有可能是基本值, 也可能是地址值

      如果说传递是地址值称为引用传递, 那就是可能是值传递/引用传递
    */
   /*  var a1 = 5
    var a2 = {m: 1}
    function fn(b) {
      
    }
    fn(a1)  // b = a1
    fn(a2) // b = a2   */
    // 说是值传递: 传递的是a2内存中保存的值(只是这个值是地址)
    // 说是引用传递: 传递的是地址值
    /* 
    值传递:
      理解1: 传递的是基本类型的值
      理解2: 传递的是变量内存中保存的数据值(基本值/地址值)
    引用传递:
      理解1: 传递的是地址值
      理解2: 没有
    */

    /* 
    5.有哪些改变变量值的方式?
      只有一种方式: 直接对这个变量重新赋值
    */
    /* var a = {m: 1}
    a = {m: 1}
    a.m = 2 // 没有改a变量, 改的是a指向的对象中的m属性的值 */

    /* 
    6.理解下面的2句话
      1. 2个引用变量指向同一个对象, 如果让一个引用变量指向新的对象
        => 另一个引用变量看到的还是原对象(属性没有变)
      2. 2个引用变量指向同一个对象, 通过一个引用变量来修改对象内部属性 
        => 另一个引用变量看到还是原对象(属性变了)
    */

    /* 
    1. 2个引用变量指向同一个对象, 如果让一个引用变量指向新的对象
        => 另一个引用变量看到的还是原对象(属性没有变)
    */
    /* var a1 = {m: 1}
    var a2 = a1
    a1 = {m: 2}
    console.log(a2.m) // 1 */

    /* 
    2. 2个引用变量指向同一个对象, 通过一个引用变量来修改对象内部属性 
        => 另一个引用变量看到还是原对象(属性变了)
    */
    /* var a1 = {m: 1}
    var a2 = a1
    a1.m = 2
    console.log(a2.m) // 2 */

    var a = {m: 1}
    var b = a
    function fn(a) {
      // a = {m: 2}
      a.m = 3
    }
    fn(b)
    console.log(a.m, b.m) // 

  </script>
  </body>
</html>
